
<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<link href="/static/css/login_reglogin.css" rel='stylesheet' type='text/css' />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			span{
				float: right;
				padding-top: 0.7em;
				padding-right: 0.3em;
			}
		</style>
		<script src="/static/js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
		<div class="bg">
			<img src="/static/images/c.jpg" alt="">
		</div>
		<div class="main">
			<div class="header" >
				<h1>创建一个新账户！</h1>
			</div>
			<p></p>
			<form action="/register" method="post">
				<ul class="left-form">
					<h2>新账户:</h2>
					<li>
						<input type="text" name="loginname" placeholder="请输入用户名" required/>
						<span id="errMsg-show">{{errMsg}}</span>
						<div class="clear"> </div>
					</li> 
					<li>
						<input type="text" name="uname" placeholder="请输入昵称" required/>
						<div class="clear"> </div>
					</li>
					<li>
						<input type="email" name="email" placeholder="请输入邮箱" required/>
						<div class="clear"> </div>
					</li> 
					<li>
						<input type="url" name="url" placeholder="请输入个人主站地址" required/>
						<div class="clear"> </div>
					</li> 
					<li>
						<input type="password" name="password" placeholder="请输入密码"  required/>
						<div class="clear"> </div>
					</li>
					<li>
						<input type="password" name="checkpwd" placeholder="请再次确认密码"  required/>
						<span id="upwd-show" >{{errPwd}}</span>
						<div class="clear"> </div>
					</li>
					<!--用于记录注册跳转来源，方便注册之后跳转之前的页面-->
						<input type="submit" value="创建并登录">
						<div class="clear"> </div>
				</ul>
				<div class="clear"> </div>
			</form>
		</div>
		<script>
			$(function(){
				$("input[name='checkpwd']").blur(function(){
					var pwd = $("input[name='password']").val();
					var checkpwd = $(this).val();
					if(pwd == ''){
						return
					}
					if(pwd == checkpwd){
						$("#upwd-show").html('✔');
						$("#upwd-show").css('color','green');
					}else{
						$("#upwd-show").css('color','red');
						$("#upwd-show").html('✘');
					}
				})
			})
		</script>
</body>
</html>